<template>
  <div class="view">
    <el-row class="handle-box">
      <span>{{ $t("log.userName") }}：</span>
      <el-select
        v-model="filters.Users"
        filterable
        @change="search"
        :placeholder="$t('public.select')"
        clearable
      >
        <el-option
          v-for="item in optionsuser"
          :key="item.userId"
          :label="item.userName"
          :value="item.userName"
        >
        </el-option>
      </el-select>

      <span>{{ $t("log.operation") }}：</span>
      <el-select
        v-model="filters.Operations"
        filterable
        @change="search"
        :placeholder="$t('public.select')"
        clearable
      >
        <el-option
          v-for="item in optionsfunction"
          :key="item.value"
          :label="item.label"
          :value="item.label"
        >
        </el-option>
      </el-select>
      <el-button class="seacths" type="primary" id="btn" @click="search" icon="el-icon-search">{{$t("public.search")}}</el-button>
    </el-row>
    <div class="tablebox">
    <!-- 列表 -->
    <template>
      <el-table :data="tables" stripe class="tablefisbox">
        <el-table-column type="index" :label="$t('public.number')" width="80">
        </el-table-column>
        <el-table-column
          prop="operationTime"
          :label="$t('log.operationTime')"
          :formatter="carTimeFilter"
        >
        </el-table-column>
        <el-table-column prop="userName" width="150" :label="$t('log.userName')">
        </el-table-column>
        <el-table-column prop="ip" label="IP"> </el-table-column>
        <el-table-column prop="funs" :label="$t('log.funs')"> </el-table-column>
        <el-table-column prop="message" :label="$t('log.message')"> </el-table-column>
      </el-table>
    </template>

    <!--工具条-->
    <el-col class="pages">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="pageSize"
        :total="total"
      >
      </el-pagination>
    </el-col>
  </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filters: {
        Users: "",
        Operations: "",
      },
      tables: [], //表格数据
      total: 0, //总共条数
      page: 1, //请求页
      limit: 10, //页条数
      pageSize: 1, //当前页
      //操作用户
      optionsuser: [],
      optionsfunction: [
        {
          value: "1",
          label: "登录",
        },
        {
          value: "2",
          label: "退出",
        },
        {
          value: "3",
          label: "添加",
        },
        {
          value: "4",
          label: "删除",
        },
        {
          value: "5",
          label: "修改",
        },
        {
          value: "6",
          label: "导入",
        },
        {
          value: "7",
          label: "导出",
        },
        {
          value: "8",
          label: "上传",
        },
        {
          value: "9",
          label: "下载",
        },
      ],
    };
  },
  mounted() {
    this.getLog();
    this.getUserName();
  },
  methods: {
    handleSizeChange(val) {
      this.limit = val;
      this.getLog();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.pageSize = val;
      this.getLog();
    },
    //模糊搜索
    search() {
      this.page = 1;
      this.limit = 10;
      this.pageSize = 1;
      this.getLog();
    },
    //获取
    async getLog() {
      try {
        let params = {
          Users: this.filters.Users,
          Operations: this.filters.Operations,
          page: this.page,
          limit: this.limit,
        };
        let res = await this.$api.management.getLog(params);
        this.total = res.count;
        this.tables = res.data;
      } catch (e) {
        console.log(e);
      }
    },
    //获取操作用户
    async getUserName() {
      let option = await this.$api.management.getseleuser();
      this.optionsuser = option.data;
    },
    carTimeFilter(row, column, cellValue, index) {
      const daterc = row[column.property];
      if (daterc != null) {
        return this.$moment(daterc).format("YYYY-MM-DD HH:mm:ss");
      }
    },
  },
};
</script>

<style lang='less' scoped>
</style>